<script setup lang="ts">
import { NMenu } from 'naive-ui'
import { useConfigStore } from '@/stores/configStore'
import { useRouter } from 'vue-router'
import Logo from '@/components/icons/Logo.vue'

const router = useRouter()

const configStore = useConfigStore()
const props = defineProps(['dartMode', 'collapsed', 'menuOptions', 'menuUpdate'])

function toHome() {
    router.push({ name: 'home' })
}
</script>

<template>
    <div v-if="configStore.getPanelMode() === '1'" class="home-info" @click="toHome()">
        <div class="icon">
            <logo size="28" />
        </div>
        <div v-if="!props.collapsed" class="title">
            Flame Admin
        </div>
    </div>
    <n-menu :root-indent="10" :icon-size="18" :inverted="configStore.theme === '' && configStore.getPanelMode() === '1'"
        :collapsed="props.collapsed" :options="props.menuOptions" @update:value="props.menuUpdate" />
</template>

<style scoped>
.icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
}

.icon:hover {
    cursor: pointer;
}

.home-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 48px;
    display: flex;
    height: 48px;
}

.home-info:hover {
    cursor: pointer;
}

.home-info .title {
    width: 160px;
    height: 48px;
    font-weight: 600;
    font-size: 18px;
    line-height: 52px;
}
</style>